@import "~@fancyapps/ui/dist/fancybox.css";


.vditor-reset {
  font-family:-apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}
.imgList {
  display: flex;
  flex-wrap: wrap;
}

.imgItem {
  padding: 5px;
  max-height: 200px;
}

.imgItem img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.mio-lazy-img {
  width: 100%;
  height: 100%;
}


pre {
  padding: 0;
  border: 0;
  font-size: 16px;
  background: unset;
}
.hljs{
  box-shadow: unset;
}

.article p {
  word-wrap: break-word;
  word-break: normal;
  font-size: 16px;
}

.vditor-linenumber {
  padding-left: 2.5em !important;
  position: relative;
}

.markdown table{
  table-layout: fixed;
}

.article {
  font-size: 1rem;

  .alert {
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .shortcode-alert-icon {
    margin-left: -10px;
    margin-right: -10px;
  }
}

.card-circle > span {
  color: #ff6661;
  font-weight: bolder;
}

.card-circle {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgba(255, 96, 91, .06);
  padding: 0 14px;
  border-radius: 30px;
  height: 30px;
  line-height: 30px;
}

.card-circle > img {
  margin-top: -3px;
  margin-right: 4px;
  width: 24px;
  height: 24px;
}

.bottomLine {
  font-size: 14px;
}

.home-article img {
  max-height: 400px;
  max-width: 300px;
  overflow: hidden;
  margin: 1px;
}

.home-article a {
  text-decoration: none;
}

.topic-author-name {
  opacity: .9;
  font-size: 15px;
  font-weight: bolder;

  a {
    text-decoration: none;
  }
}

.topic h1 {
  margin-bottom: 5px
}

.topic ol {
  margin-bottom: 5px
}

.topic #author {
  margin-bottom: 10px
}

.home-summary {
  font-size: 16px
}

.tag-icon {
  max-width: 20px;
  max-height: 20px;
}

.keywords-a {
  border: 2px solid rgba(255, 255, 255, 0);
  display: block;
  text-align: center;
  border-radius: 3px;

  a {
    padding: 5px 5px;
    text-decoration: none;
  }

  h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-decoration: none;
    height: 25px;
    overflow: hidden;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 17px;
    color: #fff;
  }

  p {
    font-size: 12px;
    color: rgba(255, 255, 255, .63);
  }
}

.topic-with {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 390px;
  min-height: 84px;
  border-radius: 8px;
  max-width: 100%;
  overflow: hidden;
  margin: 16px auto;
  padding: 12px 12px 9px 12px;
}

.LinkCard-contents {
  display: block;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  position: relative;
}

.vditor-superf-toolbar {
  background-color: #f6f8fa;
  text-align: center;
}

.article blockquote {
  font-size: 15px;
  border: 0;
  background: var(--tblr-code-bg);
  border-radius: 4px;
  padding: 8px 15px;
  border-top: 2px dotted #fff;
  border-bottom: 2px dotted #fff;
  margin: 1em 0;
}

.article .quote blockquote {
  margin-top: 1px;
  padding-bottom: 5px;
  background: #F9F9F9 none no-repeat 20px 6px;
}

.shortcode-content-hidden {
  font-size: 17px;
  border: 0;
  background: #f4f6fa;
  border-radius: 4px;
  padding: 8px 15px;
  border-top: 2px dotted #fff;
  border-bottom: 2px dotted #fff;
  border-left: 2px dotted #fff;
  border-left: 2px dotted #fff;
  margin: 1em 0;

  .shortcode-content-hidden-info {
  }

  .shortcode-content-hidden-title {
    font-size: 20px;
    font-weight: bold;
  }
}

.shortcode-content-show {
  font-size: 17px;
  border: 0;
  background: #e3e3e3;
  border-radius: 4px;
  padding: 8px 15px;
  border-top: 2px dotted #fff;
  border-bottom: 2px dotted #fff;
  border-left: 2px dotted #fff;
  border-left: 2px dotted #fff;
  margin: 1em 0;

  .shortcode-content-show-info {
  }

  .shortcode-content-show-title {
    font-size: 20px;
    font-weight: bold;
  }
}

.comment-optimal {
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  border-color: #28a745;
}

.comment-optimal:hover,
.comment-optimal:focus,
.comment-optimal:active {
  transform: translateY(-8px);
}

.article:not(pre) :root {
  --bg-color: #ffffff; /* 定义背景颜色变量 */
  --border-color: #eceeef; /* 定义边框颜色变量 */
  --text-color: #454545; /* 定义文本颜色变量 */
  --highlight-bg-color: #f9f9f9; /* 定义行高亮背景颜色变量 */
}

.article:not(pre) table {
  width: 100%;
  background-color: var(--bg-color);
  border-collapse: collapse;
}

.article:not(pre) table th,
.article:not(pre) table td {
  padding: 0.5rem;
  vertical-align: middle;
  border-top: 1px solid var(--border-color);
}

.article:not(pre) table thead th {
  vertical-align: middle;
  border-bottom: 2px solid var(--border-color);
}

.article:not(pre) table tbody + tbody {
  border-top: 2px solid var(--border-color);
}

.article:not(pre) table .table-bordered,
.article:not(pre) table .table-bordered th,
.article:not(pre) table .table-bordered td {
  border: 1px solid var(--border-color);
}

.article:not(pre) table .table-bordered th,
.article:not(pre) table .table-bordered td {
  border-width: 0 1px 1px 0;
}

.article:not(pre) table .table-bordered th:last-child,
.article:not(pre) table .table-bordered td:last-child {
  border-right-width: 1px;
}

.article:not(pre) table .table-bordered th:first-child,
.article:not(pre) table .table-bordered td:first-child {
  border-left-width: 1px;
}



.article:not(pre) table tbody tr:nth-child(even) {
  background-color: var(--highlight-bg-color);
}

.article:not(pre) table tbody tr:hover {
  background-color: #f2f2f2;
}


/* 夜间模式样式 */
[data-theme="theme-dark"] .article:not(pre) {
  --bg-color: #292d31; /* 修改背景颜色变量 */
  --border-color: #464e5f; /* 修改边框颜色变量 */
  --text-color: #b2b2b2; /* 修改文本颜色变量 */
  --highlight-bg-color: #3b3f45; /* 修改行高亮背景颜色变量 */
  background-color: transparent; /* 去掉背景颜色 */
}

[data-theme="theme-dark"] .article:not(pre) table tbody tr:hover {
  background-color: transparent; /* 将 hover 颜色设为透明 */
}
